<aside class="al-sidebar" ng-swipe-right="menuExpand()" ng-swipe-left="menuCollapse()"
       ng-mouseleave="hoverElemTop=selectElemTop">
  <ul class="al-sidebar-list" slimscroll="{height: '{{menuHeight}}px'}" slimscroll-watch="menuHeight" >
    <li ng-repeat="item in menuItems" class="al-sidebar-list-item"
        ng-class="{'selected': item.selected, 'with-sub-menu': item.submenu}">

      <a ng-mouseenter="hoverItem($event, item)"  ui-sref="{{item.sref}}" ng-if="!item.submenu" class="al-sidebar-list-link">
        <i class="{{ item.icon }}"></i><span>{{ item.name }}</span>
      </a>

      <a ng-mouseenter="hoverItem($event, item)" ng-if="item.submenu" ng-click="toggleSubMenu($event, item)"
         class="al-sidebar-list-link">
        <i class="{{ item.icon }}"></i><span>{{ item.name }}</span>
        <b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
           ng-if="item.submenu"></b>
      </a>

      <ul ng-if="item.submenu" class="al-sidebar-sublist fadeInLeft animated"
          ng-class="{expanded: item.expanded, 'slide-right': item.slideRight}">
        <li ng-repeat="subitem in item.submenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
          <a ng-mouseenter="hoverItem($event, item)" ng-if="subitem.subMenu" ng-click="toggleSubMenu($event, subitem);"
             class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.name }}</span>
            <b class="fa" ng-class="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"
               ng-if="subitem.subMenu"></b>
          </a>
          <ul ng-if="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list fadeInLeft animated"
              ng-class="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
            <li ng-mouseenter="hoverItem($event, item)" ng-repeat="subSubitem in subitem.subMenu" ng-class="{selected: subitem.selected}">
              <a  ng-mouseenter="hoverItem($event, item)" ui-sref="{{subitem.sref}}">{{ subSubitem.title }}</a>
            </li>
          </ul>
          <a  ng-mouseenter="hoverItem($event, item)" ng-if="!subitem.subMenu"  ui-sref="{{subitem.sref}}">{{ subitem.name}}</a>
        </li>
      </ul>
    </li>
  </ul>
  <div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
       ng-class="{'show-hover-elem': showHoverElem }"></div>
</aside>